<script setup>
import { ref, reactive } from 'vue';

// 定义事件
const emit = defineEmits(['submit']);

// 表单数据
const formData = reactive({
  phone: '',
  password: '',
  remember: false
});

// 密码显示控制
const showPassword = ref(false);

// 表单提交
const submitForm = () => {
  // 简单的表单验证
  if (!formData.phone) {
    console.error('请输入手机号码');
    return;
  }
  if (!formData.password) {
    console.error('请输入密码');
    return;
  }
  
  // 触发提交事件
  emit('submit', formData);
};

// 切换密码显示
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};
</script>

<template>
  <div class="login-form">
    <div class="form-group">
      <input 
        type="tel" 
        class="form-input" 
        v-model="formData.phone"
        placeholder="手机号码"
      >
    </div>
    
    <div class="form-group password-group">
      <input 
        :type="showPassword ? 'text' : 'password'" 
        class="form-input" 
        v-model="formData.password"
        placeholder="密码"
      >
      <div class="eye-icon" @click="togglePasswordVisibility">
        <svg v-if="!showPassword" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="12" cy="12" r="3" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="1" y1="1" x2="23" y2="23" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
    
    <div class="form-options">
      <label class="remember-label">
        <input 
          type="checkbox" 
          v-model="formData.remember"
        >
        <span class="remember-text">记住密码?</span>
      </label>
    </div>
    
    <button class="login-button" @click="submitForm">登录</button>
  </div>
</template>

<style scoped>
.login-form {
  width: 100%;
}

.form-group {
  margin-bottom: 16px;
  position: relative;
}

.form-input {
  width: 100%;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: var(--primary-color);
}

.password-group {
  position: relative;
}

.eye-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.form-options {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.remember-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.remember-text {
  color: #666;
  font-size: 14px;
  margin-left: 4px;
}

.login-button {
  width: 100%;
  height: 48px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:active {
  background-color: #0056b3;
}
</style> 